/* eslint-disable react/no-unused-state */
import React, { Component } from 'react';
import { Input, Select, Grid, DatePicker, Button } from '@icedesign/base';
import { FormBinderWrapper, FormBinder } from '@icedesign/form-binder';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
} from '@icedesign/form-binder';
const { MonthPicker, YearPicker, RangePicker } = DatePicker;

const { Row, Col } = Grid;

export default class UserTable extends Component {
  static displayName = 'UserTable';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      formValue: {},
    };
  }

  formChange = (value) => {
    console.log('changed value', value);
    this.setState({
      formValue: value,
    });
  };

  render() {
    const { formValue } = this.state;

    return (
      <IceContainer title="搜索">
        <IceFormBinderWrapper
          value={this.props.value}
          onChange={this.props.onChange}
        >
          <div>
            <Row wrap>
              <Col xxs={24} xs={12} l={8} style={styles.filterCol}>
                <label style={styles.filterTitle}>用户类型</label>
                <IceFormBinder required={true} message="当前表单必填">
                  <Select placeholder="请选择" style={{ width: '200px' }} name="type">
                    <Select.Option value="超级管理员">超级管理员</Select.Option>
                    <Select.Option value="事业(高校)管理员">事业(高校)管理员</Select.Option>
                    <Select.Option value="企业管理员">企业管理员</Select.Option>
                    <Select.Option value="普通用户">普通用户</Select.Option>
                  </Select>
                </IceFormBinder>
              </Col>
              {/*<Col xxs={24} xs={12} l={8} style={styles.filterCol}>*/}
              {/*<label style={styles.filterTitle}>额外参数</label>*/}
              {/*<IceFormBinder>*/}
              {/*<Input name="tag" />*/}
              {/*</IceFormBinder>*/}
              {/*</Col>*/}

              <Col xxs={24} xs={12} l={8} style={styles.filterCol}>
                <label style={styles.filterTitle}>起止日期</label>
                <IceFormBinder required={true} message="当前表单必填"
                  name="date"
                  valueFormatter={(date, dateStr) => {
                    return dateStr;
                  }}
                >
                  <RangePicker
                    onChange={(val, str) => console.log(str)}
                    // onStartChange={(val, str) => console.log(val, str)}
                    name="date"
                  />
                </IceFormBinder>
              </Col>
            </Row>
            <div
              style={{
                textAlign: 'left',
                marginLeft: '12px',
              }}
            >
              <Button onClick={this.props.onReset} type="normal">
                重置
              </Button>
              <Button
                onClick={this.props.onSubmit}
                type="primary"
                style={{ marginLeft: '10px' }}
              >
                确定
              </Button>
            </div>
          </div>
        </IceFormBinderWrapper>
      </IceContainer>
    );
  }
}

const styles = {
  formRow: {
    marginBottom: '18px',
  },
  formCol: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '20px',
  },
  label: {
    lineHeight: '28px',
    paddingRight: '10px',
  },
  filterCol: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '20px',
  },

  filterTitle: {
    width: '68px',
    textAlign: 'right',
    marginRight: '12px',
    fontSize: '14px',
  },

  filterTool: {
    width: '200px',
  },
};
